<template>
   <div class="xing-notification">
     <el-card class="box-card">
        <p>业务场景：</p>
        <p>Notification自定义按钮并实现关闭功能及如何处理多个通知</p>
        <p>以及采用异步的方式处理多个通知重叠的情况</p>
     </el-card>
   </div>
</template>

<script>
export default {
  name: 'Notification',
  data () {
    return {
      notifications: {} // 使用messageId作为弹窗的key，用来获取弹窗的实例，以对对应弹窗进行操作
    }
  },
  created () {
    this.handleGetMsg()
    // 轮询
    // setInterval(() => {
    //   this.handleGetMsg()
    // }, 5000)
  },
  methods: {
    handleGetMsg () {
      let data = [
        {
          createTime: '2020-12-30',
          note: 'CBC-1担保求数 8000次,超过设定预警值 7' + new Date()
        },
        {
          createTime: '2020-01-12',
          note: 'CBC-1异常行为最新周累计8次CBC-1异常行为最新周累计8次CBC-1异常行为' + new Date()
        }
      ]
      this.handleShowNotify(data)
    },
    async handleShowNotify (data) {
      if (!data && data.length === 0) return false
      let warningMsg = data
      for (let i = 0; i < warningMsg.length; i++) {
        let msg = warningMsg[i].note.split(';')[0].split(',')
        let msgTitle = msg[0]
        let msgDesc = msg[1]
        const h = this.$createElement
        let _this = this
        let notify = await this.$notify({
          title: msgTitle,
          // dangerouslyUseHTMLString: true,
          message: h('p', [
            h('p', null, msgDesc),
            h('p', null, `${warningMsg[i].createTime}`),
            h('el-button', {
              style: {
                float: 'right'
              },
              attrs: {
                size: 'small',
                type: 'primary'
              },
              class: 'notice-cursor',
              on: {
                click: () => {
                  _this.closeNotification(warningMsg[i].note)
                }
              }
            }, '确定')
          ]),
          duration: 0
        })
        // 将messageId和通知实例放入字典中
        _this.notifications[warningMsg[i].note] = notify
      }
    },
    // 关闭单个msg
    closeNotification (messageId) {
      this.notifications[messageId].close()
      delete this.notifications[messageId]
    }
  }
}
</script>

<style scoped>

</style>
